<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			Atemplate.js wPanel.js应用
		</title>
	</head>
	<style>
		body{
			margin: 0;
			overflow: hidden;
		}
		.fl{
			float:left;
		}
		.fr{
			float: right;
		}
		#tip {
		    position: fixed;
		    width: auto;
		    height: 20px;
		    color: red;
		    text-align: center;
		    border: 1px;
		    left:10px;
		    top:10px;
		    background: #700;
		    color:#FFF;
		    padding:5px;
		}
		#WebGL-output{
		}
		.side{
			padding: 5px;
			position: fixed;
			width:300px;
			top:0;
			right: 0;
			bottom:0;
			background: rgba(200,200,200,0.9);
			z-index: 1000;
		}
		.side .box{
			height: 40px;
			line-height: 40px;
		}
		.side .box span{
			margin-top:10px;
		}
		.w-switch{
			cursor: pointer;
			position: relative;
			display: inline-block;
			height: 20px;
			width: 50px;
			border-radius: 15px;
			background: #FFF;
			border:1px solid #555;
		}
		.w-switch i{
			position: absolute;
			display: inline-block;
			height: 20px;
			width: 20px;
			top:0;
			border-radius: 10px;
			background: #e2e2e2e2;
		}
		.w-switch i.select{
			position: absolute;
			display: inline-block;
			height: 20px;
			width: 20px;
			top:0;
			right: 0;
			border-radius: 10px;
			background: #0066ff;
		}
		.lil-gui.autoPlace{
			right:0;
		}
	</style>
	<body onload="onload">
		<div id="tip">Atemplate.js wPanel.js write by wuweiwei(邬畏畏)</div>
		<div id="WebGL-output">
			
		</div>
		<div class="side" id="side">
			<div>温馨提示：</div>
			<div>鼠标左键旋转，鼠标右键移动</div>
			<div class="box">
				移动旋转场景<span type="camera" class="w-switch fr"><i class="select"></i></span>
			</div>
			<div class="box">
				移动模型<span type="modelmove" class="w-switch fr"><i class=""></i></span>
			</div>
			<div class="box">
				旋转模型<span type="modelrotate" class="w-switch fr"><i class=""></i></span>
			</div>
		</div>
	</body>
</html>

<script type="text/javascript" src="./libs/Atemplate.js"></script>
<script type="text/javascript" src="./libs/wPanel.js"></script>
<script type="text/javascript">
	var App;
	App = {
		panelAttrObject : null,
		init: function(){
			this.initComponent();
		},
		initComponent : function(){
			/*wPanel class is create panel*/
			this.panelAttrObject = new wPanel({
				title:"模型名称",
				position:{
					x:30,
					y:80
				},
				visible : true
			});

			this.renderData();

		},
		renderData : function(){
			var data = {
				list:[
					{
						"name":"墙体",
						"结构用途":"承重",
						"钢筋保护层":"钢筋保护层 1 <25 mm>",
					},
					{
						"长度":"5650.0 mm",
						"面积":"1132500.0 mm²",
						"体积":"736336999.33 mm³",
					}
				],
			}
			var at = new Atemplate("data",data,"./views/panelA.html");
			/*
				new Atemplate(参数1,参数2,参数3);
				参数1 : 参数3(即"./views/panelA.html" 页面用到变量名)
				参数2 : 传递给模板页面的数据
				参数3 : 加载的模板页面
			*/
			at.render( (html) => {
				this.panelAttrObject.setData(html); /*把加载的页面(./views/panelA.html)HTML内容 复制给 面板页面*/
			});
			/*
			at.render( callback ); 加载模板并渲染设置好的数据,callback 参数 是 选然后的 数据+html 
			然后把 这个数据(即 上面 的 html 设置到页面中)
			*/

			//this.panelAttrObject.show();
		}

	};

	App.init();

</script>
